<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="全库唯一码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'puid', validatorRules.puid]" placeholder="请输入全库唯一码"></a-input>
        </a-form-item>
        <a-form-item label="采购方编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'purchaserCode', validatorRules.purchaserCode]" placeholder="请输入采购方编码"></a-input>
        </a-form-item>
        <a-form-item label="供应商编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'supplierCode', validatorRules.supplierCode]" placeholder="请输入供应商编码"></a-input>
        </a-form-item>
        <a-form-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'supplierName', validatorRules.supplierName]" placeholder="请输入供应商名称"></a-input>
        </a-form-item>
        <a-form-item label="采购订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'poNo', validatorRules.poNo]" placeholder="请输入采购订单编号"></a-input>
        </a-form-item>
        <a-form-item label="采购订单行项目号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'poItemNo', validatorRules.poItemNo]" placeholder="请输入采购订单行项目号"></a-input>
        </a-form-item>
        <a-form-item label="采购订单行项目id" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'poItemId', validatorRules.poItemId]" placeholder="请输入采购订单行项目id"></a-input>
        </a-form-item>
        <a-form-item label="合同编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'conCode', validatorRules.conCode]" placeholder="请输入合同编号"></a-input>
        </a-form-item>
        <a-form-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'conName', validatorRules.conName]" placeholder="请输入合同名称"></a-input>
        </a-form-item>
        <a-form-item label="采购方公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'buyerName', validatorRules.buyerName]" placeholder="请输入采购方公司名称"></a-input>
        </a-form-item>
        <a-form-item label="采购方物料编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'materialCode', validatorRules.materialCode]" placeholder="请输入采购方物料编码"></a-input>
        </a-form-item>
        <a-form-item label="采购方物料描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'materialDesc', validatorRules.materialDesc]" placeholder="请输入采购方物料描述"></a-input>
        </a-form-item>
        <a-form-item label="采购数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'amount', validatorRules.amount]" placeholder="请输入采购数量"></a-input>
        </a-form-item>
        <a-form-item label="合同编号（国网经法）" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'sellerConCode', validatorRules.sellerConCode]" placeholder="请输入合同编号（国网经法）"></a-input>
        </a-form-item>
        <a-form-item label="技术规范流水号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'serialNumber', validatorRules.serialNumber]" placeholder="请输入技术规范流水号"></a-input>
        </a-form-item>
        <a-form-item label="合同签订日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择合同签订日期" v-decorator="[ 'sellerSignTime', validatorRules.sellerSignTime]"
                  :trigger-change="true" style="width: 100%"/>
        </a-form-item>
        <a-form-item label="合同类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number v-decorator="[ 'conType', validatorRules.conType]" placeholder="请输入合同类型" style="width: 100%"/>
        </a-form-item>
        <a-form-item label="项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'prjCode', validatorRules.prjCode]" placeholder="请输入项目编号"></a-input>
        </a-form-item>
        <a-form-item label="工程项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'prjName', validatorRules.prjName]" placeholder="请输入工程项目名称"></a-input>
        </a-form-item>
        <a-form-item label="物资编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matCode', validatorRules.matCode]" placeholder="请输入物资编码"></a-input>
        </a-form-item>
        <a-form-item label="采购技术固化ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'fixedTechId', validatorRules.fixedTechId]" placeholder="请输入采购技术固化ID"></a-input>
        </a-form-item>
        <a-form-item label="合同包号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'pkgNo', validatorRules.pkgNo]" placeholder="请输入合同包号"></a-input>
        </a-form-item>
        <a-form-item label="招标批次号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'bidBatCode', validatorRules.bidBatCode]" placeholder="请输入招标批次号"></a-input>
        </a-form-item>
        <a-form-item label="固化ID描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['extDes']" rows="4" placeholder="请输入固化ID描述"/>
        </a-form-item>
        <a-form-item label="物资大类编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMaxCode', validatorRules.matMaxCode]" placeholder="请输入物资大类编码"></a-input>
        </a-form-item>
        <a-form-item label="物资中类编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMedCode', validatorRules.matMedCode]" placeholder="请输入物资中类编码"></a-input>
        </a-form-item>
        <a-form-item label="物资小类编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMinCode', validatorRules.matMinCode]" placeholder="请输入物资小类编码"></a-input>
        </a-form-item>
        <a-form-item label="物资大类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMaxName', validatorRules.matMaxName]" placeholder="请输入物资大类名称"></a-input>
        </a-form-item>
        <a-form-item label="物资中类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMedName', validatorRules.matMedName]" placeholder="请输入物资中类名称"></a-input>
        </a-form-item>
        <a-form-item label="物资小类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'matMinName', validatorRules.matMinName]" placeholder="请输入物资小类名称"></a-input>
        </a-form-item>
        <a-form-item label="更新时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择更新时间" v-decorator="[ 'modifyTime', validatorRules.modifyTime]" :trigger-change="true"
                  style="width: 100%"/>
        </a-form-item>
        <a-form-item label="预留字段1" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'remark1', validatorRules.remark1]" placeholder="请输入预留字段1"></a-input>
        </a-form-item>
        <a-form-item label="预留字段2" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'remark2', validatorRules.remark2]" placeholder="请输入预留字段2"></a-input>
        </a-form-item>
        <a-form-item label="预留字段3" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'remark3', validatorRules.remark3]" placeholder="请输入预留字段3"></a-input>
        </a-form-item>
        <a-form-item label="预留字段4" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'remark4', validatorRules.remark4]" placeholder="请输入预留字段4"></a-input>
        </a-form-item>
        <a-form-item label="预留字段5" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'remark5', validatorRules.remark5]" placeholder="请输入预留字段5"></a-input>
        </a-form-item>

      </a-form>
    </a-spin>
    <a-button type="primary" @click="handleOk">确定</a-button>
    <a-button type="primary" @click="handleCancel">取消</a-button>
  </a-drawer>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JDate from '@/components/jeecg/JDate'

  export default {
    name: 'EipPurchaseOrderModal',
    components: {
      JDate
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },

        confirmLoading: false,
        validatorRules: {
          puid: { rules: [{ required: true, message: '请输入全库唯一码!' }] },
          purchaserCode: { rules: [{ required: true, message: '请输入采购方编码!' }] },
          supplierCode: { rules: [{ required: true, message: '请输入供应商编码!' }] },
          supplierName: { rules: [{ required: true, message: '请输入供应商名称!' }] },
          poNo: { rules: [{ required: true, message: '请输入采购订单编号!' }] },
          poItemNo: { rules: [{ required: true, message: '请输入采购订单行项目号!' }] },
          poItemId: { rules: [{ required: true, message: '请输入采购订单行项目id!' }] },
          conCode: {},
          conName: {},
          buyerName: {},
          materialCode: {},
          materialDesc: {},
          amount: {},
          sellerConCode: {},
          serialNumber: {},
          sellerSignTime: {},
          conType: {},
          prjCode: {},
          prjName: {},
          matCode: {},
          fixedTechId: {},
          pkgNo: {},
          bidBatCode: {},
          extDes: {},
          matMaxCode: {},
          matMedCode: {},
          matMinCode: {},
          matMaxName: {},
          matMedName: {},
          matMinName: {},
          modifyTime: {},
          remark1: {},
          remark2: {},
          remark3: {},
          remark4: {},
          remark5: {}
        },
        url: {
          add: '/eipPurchaseOrder/add',
          edit: '/eipPurchaseOrder/edit'
        }

      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'puid', 'purchaserCode', 'supplierCode', 'supplierName', 'poNo', 'poItemNo', 'poItemId', 'conCode', 'conName', 'buyerName', 'materialCode', 'materialDesc', 'amount', 'sellerConCode', 'serialNumber', 'sellerSignTime', 'conType', 'prjCode', 'prjName', 'matCode', 'fixedTechId', 'pkgNo', 'bidBatCode', 'extDes', 'matMaxCode', 'matMedCode', 'matMinCode', 'matMaxName', 'matMedName', 'matMinName', 'ModifyTime', 'remark1', 'remark2', 'remark3', 'remark4', 'remark5'))
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.puid) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }

        })
      },
      handleCancel() {
        this.close()
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'puid', 'purchaserCode', 'supplierCode', 'supplierName', 'poNo', 'poItemNo', 'poItemId', 'conCode', 'conName', 'buyerName', 'materialCode', 'materialDesc', 'amount', 'sellerConCode', 'serialNumber', 'sellerSignTime', 'conType', 'prjCode', 'prjName', 'matCode', 'fixedTechId', 'pkgNo', 'bidBatCode', 'extDes', 'matMaxCode', 'matMedCode', 'matMinCode', 'matMaxName', 'matMedName', 'matMinName', 'ModifyTime', 'remark1', 'remark2', 'remark3', 'remark4', 'remark5'))
      }

    }
  }
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
</style>